<template>
  <q-page>
    <q-card class="q-ma-sm">
      <q-card-title>项目列表</q-card-title>
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <q-select class="q-ma-sm" float-label="环境" :clearable="true"
                      separator v-model="env.value" :options="env.items"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm">
      <q-card-main>
        <q-table grid :data="tableData" :columns="columns" :pagination.sync="serverPagination" row-key="name"
                 :rows-per-page-options="rowsPerPageOptions" ref="table" @request="request" :loading="loading"
                 :visible-columns="visibleColumns" >
          <template slot="top-left" slot-scope="props">
            <q-btn color="primary" icon="search" class="float-right q-mr-sm" @click.native="$store.dispatch('listProject/loadTable')"></q-btn>
            <q-btn color="primary" icon="add" class="q-mr-sm" @click.native="$store.dispatch('frame/jump', '/newproject')"></q-btn>
            <q-table-columns color="secondary" class="q-mr-sm" v-model="visibleColumns" :columns="columns"/>
            <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"/>
          </template>
          <template slot="top-right" slot-scope="props">
            <q-search @input="request(props)" :debounce="600" clearable v-model="search" placeholder="项目名,项目英文名" style="width:330px;"/>
          </template>
          <div slot="item" slot-scope="props" class="q-pa-xs col-xs-12 col-md-12 col-sm-12 col-lg-12 transition-generic">
            <q-card class="transition-generic cursor-pointer">
              <q-card-main>
                <tree-table :model="props.row" :colums="columns" ></tree-table>
              </q-card-main>
            </q-card>
          </div>
        </q-table>
      </q-card-main>
    </q-card>
    <ProjectSvg :svgDialog = "svgDialog" @upSvg="$store.commit('listProject/closeSvg')" :projectId="projectId"/>
    <ProjectInfo :infoDialog = "infoDialog" @upInfo="$store.commit('listProject/closeInfo')" :projectId="projectId"/>
  </q-page>
</template>

<script>
import listProjectModule from '../../store/listProject'
export default {
  preFetch ({ store }) {
    store.registerModule('listProject', listProjectModule)
    Promise.all([
      store.dispatch('listProject/loadFilters'),
      store.dispatch('listProject/loadHeaders'),
      store.dispatch('listProject/loadTable')])
      .then((result) => {
      }).catch((error) => {
        console.log(error)
      })
  },
  name: 'ListProject',
  data: function () {
    return this.$store.state.listProject
  },
  methods: {
    request (props) {
      this.serverPagination = props.pagination
      this.$store.dispatch('listProject/loadTable')
    }
  },
  beforeDestroy () {
    this.$store.unregisterModule('listProject')
  },
  components: {
    'tree-table': () => import('components/tree/treeTable'),
    ProjectSvg: () => import('pages/project/ProjectSvg'),
    ProjectInfo: () => import('pages/project/ProjectInfo')
  }
}
</script>

<style>
</style>
